import React, { Component } from "react";
import {
  Card,
  Input,
  Select,
  Form,
  Button,
  Tooltip,
  Icon,
  message
} from "antd";
import { connect } from "dva";

const { Option } = Select;
@connect(stores => ({
  registerData: stores.channelRegisterModel
}))
class BackstateConfig extends Component {
  handleSubmit = e => {
    e.preventDefault();
    const { personId, commitEnable = () => {} } = this.props;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const temp = values.owners;
        const t = {
          owners: [{ key: personId, value: temp }]
        };

        const { dispatch } = this.props;
        dispatch({
          type: "channelRegisterModel/test",
          payload: { ...values, ...t }
        }).then(res => {
          if (res.success) {
            message.success("测试成功！");
            commitEnable(true);
          } else {
            message.error("测试失败！");
          }
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0
        },
        sm: {
          span: 16,
          offset: 8
        }
      }
    };

    return (
      <Card
        title={
          <span>
            渠道配置
            <Tooltip title="请输入订阅的阿里CSB接口服务相关数据，进行校验。">
              <span>
                <Icon
                  type="question-circle"
                  theme="filled"
                  style={{
                    fontSize: 16,
                    color: "rgba(0,0,0,0.25)",
                    marginLeft: 8
                  }}
                />
              </span>
            </Tooltip>
          </span>
        }
        style={{ marginTop: 16, marginBottom: 16 }}
      >
        <Form {...formItemLayout}>
          <Form.Item label=" API名称：">
            {getFieldDecorator("apiName", {
              rules: [
                {
                  message: "请输入API名称!"
                },
                {
                  required: true,
                  message: "请输入API名称!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={100}
                placeholder="请输入API名称"
              />
            )}
          </Form.Item>
          <Form.Item label=" URL：">
            {getFieldDecorator("apiUrl", {
              rules: [
                {
                  message: "请输入URL!"
                },
                {
                  required: true,
                  message: "请输入URL!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={150}
                placeholder="请输入URL"
              />
            )}
          </Form.Item>

          <Form.Item label=" version：">
            {getFieldDecorator("apiHost", {
              rules: [
                {
                  required: true,
                  message: "请输入version!",
                  whitespace: true
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={200}
                placeholder="请输入version"
              />
            )}
          </Form.Item>
          <Form.Item label=" app_key：">
            {getFieldDecorator("apiAppKey", {
              rules: [
                {
                  required: true,
                  message: "请输入app_key!",
                  whitespace: true
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={50}
                placeholder="请输入app_key"
              />
            )}
          </Form.Item>

          <Form.Item label=" app_secret：">
            {getFieldDecorator("apiAppSecret", {
              rules: [
                {
                  required: true,
                  message: "请输入app_secret!",
                  whitespace: true
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={50}
                placeholder="请输入app_secret"
              />
            )}
          </Form.Item>
          <Form.Item label=" method：">
            {getFieldDecorator("method", {
              rules: [
                {
                  required: true,
                  message: "请选择method!",
                  whitespace: true
                }
              ]
            })(
              <Select
                showSearch
                style={{ width: 466 }}
                placeholder="请选择method"
              >
                <Option value="POST">POST</Option>
                <Option value="GET">GET</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button
              type="primary"
              htmlType="submit"
              onClick={this.handleSubmit}
            >
              联通测试
            </Button>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}

export default BackstateConfig;
